<template>
    <div class="AICard">
        <div class="AIInfo">
            <h2 class="title">Become the expert in relationship with our AI coach</h2>
            <p class="desc">Two real-time specialists experienced in starting, developing, and maintaining relationships
                will guide you toward the best.</p>
        </div>
        <div class="cardList">
            <div v-for="card in cardList" :key="card.title" class="card"
                :style="{ backgroundImage: `url(${card.pic})` }">
                <div class="cardCont">
                    <h3 class="title">{{ card.title }}</h3>
                    <p class="desc" :style="{width:card.width}">{{ card.desc }}</p>
                    <p class="btn" @click="toDetails(card.id)">Buy Toy to Unlock The Role</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import pic1 from '@/assets/images/ai_card_pic1.png';
import pic2 from '@/assets/images/ai_card_pic2.png';
const router = useRouter()


const cardList = reactive([
    {
        pic: pic1,
        title: 'For Him',
        desc: 'Don’t know how to start a conversation to make her laugh? Don’t worry! With our guide, you’ll go from a novice to a pro, mastering the art of engaging conversation, playful flirting, and building deeper, spicy connections.',
        width: '800px',
        id: 1
    },
    {
        pic: pic2,
        title: 'For Her',
        desc: 'Girls help girls. She’s your close female friend, someone you can talk to about anything, especially when it comes to topics that matter most to women. She understands your needs and offers advice to enhance your sexual desires and achieve better sexual wellness.',
        width: '920px',
        id: 2
    }
])


const toDetails = (id: number) => {
   router.push({ name: 'productDetail', query: { id } });
}
</script>
<style lang="scss" scoped>
.AICard {
    .AIInfo {
        padding: 135px 66px 86px 86px;
        margin-top: 100px;
        display: flex;
        justify-content: space-between;
        color: #000;
        align-items: end;

        .title {
            font-size: 48px;
            font-weight: 700;
            line-height: 56px;
            width: 810px;
        }

        .desc {
            font-size: 24px;
            font-weight: 400;
            line-height: 32px;
            width: 800px;
        }
    }
    .cardList{
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        .card{
            width: 940px;
            height: 800px;
            background-size: 100% 100%;
            display: flex;
            align-items: flex-end;
            .cardCont{
                color: #fff;
                text-align: center;
                margin-bottom: 62px;
                width: 100%;
                .title{
                    font-size: 28px;
                    font-weight: 700;
                    margin-bottom: 14px;
                    line-height: 40px;
                }
                .desc{
                    font-size: 20px;
                    font-weight: 400;
                    line-height: 28px;
                    margin: 0 auto;
                }
                .btn{
                    width: 465px;
                    height: 73px;
                    background: #846FC1;
                    border-radius: 37px;
                    text-align: center;
                    line-height: 73px;
                    font-size: 28px;
                    font-weight: 600;
                    color: #fff;
                    margin: 40px auto 0;
                    cursor: pointer;
                }
            }
        }
    }
}
@media screen and (max-width: 750px) {
    .AICard {
        .AIInfo {
            padding: 0 0.7rem 0 1rem;
            margin-top: 1rem;
            flex-wrap: wrap;
            .title {
                font-size: 0.48rem;
                line-height: 0.56rem;
                width: 100%;
            }

            .desc {
                font-size: 0.28rem;
                line-height: 0.34rem;
                margin-top: 0.32rem;
                width: 100%;
            }
        }
        .cardList{
            flex-wrap: wrap;
            padding: 0;
            margin-top: 0.62rem;
            .card{
                width: 100%;
                height: 7.5rem;
                background-size: cover;
                background-position: center;
                .cardCont{
                    margin-bottom: 0.5rem;
                    padding: 0 0.47rem;
                    .title{
                        font-size: 0.32rem;
                        line-height: 1;
                        margin-bottom: 0.17rem;
                    }
                    .desc{
                        font-size: 0.28rem;
                        line-height: 0.34rem;
                        width: 100% !important;
                    }
                    .btn{
                        width: 3.28rem;
                        height: 0.64rem;
                        font-size: 0.2rem;
                        line-height: 0.64rem;
                        border-radius: 0.32rem;
                        margin-top: 0.2rem;
                    }
                }
            }
        }
    }
    
}
</style>